<template>
  <div class="login-page">
    <!-- 背景装饰 -->
    <div class="login-page__background"></div>

    <!-- 主容器 -->
    <div class="login-page__container">
      <!-- 品牌区域 -->
      <div class="login-page__brand">
        <div class="brand__logo">
          <img src="@/assets/logo.png" alt="系统logo" />
        </div>
        <h1 class="brand__title">后台 后台管理系统</h1>
      </div>

      <!-- 登录表单卡片 -->
      <div class="login-card">
        <div class="login-card__header">
          <h2 class="login-card__title">登录</h2>
          <div class="login-card__divider"></div>
        </div>

        <el-form ref="dataForm" class="login-form" :rules="rules" :model="formData" @keyup.enter.native="handleSubmit">
          <el-form-item prop="username">
            <el-input
              type="text"
              v-model="formData.username"
              placeholder="用户名"
              autocomplete="off"
              size="large"
              clearable
              prefix-icon="el-icon-s-custom"
              class="login-form__input"
            ></el-input>
          </el-form-item>

          <el-form-item prop="userpwd">
            <el-input
              type="password"
              v-model="formData.userpwd"
              placeholder="密码"
              autocomplete="off"
              size="large"
              clearable
              prefix-icon="el-icon-lock"
              class="login-form__input"
            ></el-input>
          </el-form-item>

          <el-form-item class="login-form__actions">
            <el-button size="large" type="primary" class="login-form__submit" @click="handleSubmit"> 登录 </el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>

    <!-- 页脚信息 -->
    <footer class="login-page__footer">
      <p>© 2023 后台管理系统 - 版权所有</p>
    </footer>
  </div>
</template>

<script>
export default {
  name: 'LoginPage',
  data() {
    return {
      formData: {
        username: '',
        userpwd: ''
      },
      rules: {
        username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
        userpwd: [{ required: true, message: '请输入密码', trigger: 'blur' }]
      }
    }
  },
  created() {
    // 监听键盘事件
    document.addEventListener('keydown', this.handleKeydown)
  },
  beforeDestroy() {
    // 移除事件监听
    document.removeEventListener('keydown', this.handleKeydown)
  },
  methods: {
    // 键盘事件处理
    handleKeydown(e) {
      // 回车提交
      if (e.keyCode === 13) {
        this.handleSubmit()
      }
    },

    // 表单提交
    handleSubmit() {
      this.$refs.dataForm.validate(valid => {
        if (valid) {
          // 模拟登录加载状态
          this.$message.success('登录成功，正在跳转...')
          // 实际项目中这里应该是登录API调用
          setTimeout(() => {
            this.$router.push('/home')
          }, 1000)
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
// 基础变量
$primary-color: #006aff;
$bg-color: #f5f7fa;
$card-bg: rgba(255, 255, 255, 0.9);
$text-color: #333;
$text-light: #666;
$border-radius: 8px;
$shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
$transition: all 0.3s ease;

.login-page {
  min-height: 100vh;
  width: 100%;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;

  &__background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(@/assets/login_bg.png) center right no-repeat;
    background-size: cover;
    z-index: 1;
    // 添加渐变遮罩增强文字可读性
    &::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0) 100%);
    }
  }

  &__container {
    flex: 1;
    position: relative;
    z-index: 10;
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    @media (min-width: 768px) {
      flex-direction: row;
      justify-content: space-between;
      padding: 4rem;
    }
  }

  &__brand {
    margin-bottom: 2rem;
    text-align: center;

    @media (min-width: 768px) {
      margin-bottom: 0;
      text-align: left;
    }
  }

  &__footer {
    position: relative;
    z-index: 10;
    padding: 1rem;
    color: $text-light;
    text-align: center;
    font-size: 0.9rem;
  }
}

// 品牌样式
.brand {
  &__logo {
    display: inline-flex;
    align-items: center;
    margin-bottom: 1rem;

    img {
      width: 60px;
      height: 60px;
      object-fit: contain;
    }
  }

  &__title {
    font-size: 2rem;
    font-weight: 600;
    color: $text-color;
    margin: 0;
  }
}

// 登录卡片样式
.login-card {
  width: 100%;
  max-width: 380px;
  background: $card-bg;
  border-radius: $border-radius;
  box-shadow: $shadow;
  overflow: hidden;
  backdrop-filter: blur(10px);
  transition: $transition;

  &:hover {
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
  }

  &__header {
    padding: 2rem 2rem 1.5rem;
  }

  &__title {
    font-size: 1.5rem;
    font-weight: 500;
    color: $text-color;
    margin: 0 0 1rem;
  }

  &__divider {
    height: 3px;
    width: 50px;
    background: $primary-color;
    border-radius: 3px;
  }
}

// 登录表单样式
.login-form {
  padding: 0 2rem 2rem;

  &__input {
    width: 100%;
    margin-bottom: 0.5rem;

    ::v-deep .el-input__inner {
      height: 50px;
      padding: 0 15px 0 40px;
      border: 1px solid #e5e6eb;
      border-radius: 4px;
      transition: $transition;

      &:focus {
        border-color: $primary-color;
        box-shadow: 0 0 0 2px rgba(0, 106, 255, 0.2);
      }
    }

    ::v-deep .el-input__prefix {
      left: 12px;
    }
  }

  &__actions {
    margin-top: 1.5rem;
  }

  &__submit {
    width: 100%;
    height: 50px;
    background: $primary-color;
    border-color: $primary-color;
    font-size: 1rem;
    border-radius: 4px;
    transition: $transition;

    &:hover,
    &:focus {
      background: #0056d2;
      border-color: #0056d2;
    }

    &:active {
      background: #0047b3;
      border-color: #0047b3;
    }
  }
}
.login-page__brand {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.brand__title {
  color: white;
}

// 响应式调整
@media (max-width: 767px) {
  .login-page__background {
    background-position: center;
  }
  .brand__title {
    font-size: 1.6rem;
  }

  .login-card {
    max-width: 100%;
  }
}

@media (max-width: 480px) {
  .login-page__container {
    padding: 1rem;
  }

  .login-card__header,
  .login-form {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}
</style>
